<template>
  <div class="wrapper-action">
    <div class="header-top">
      <div @click="leftBtn" class="arrow-left">
          <img src="../../images/jiantou.png" alt="">
      </div>
    </div>
    <div class="orders-hd">
      <div class="hd-item" @click="changeOdType(item.value)" :class="[orderStatus == item.value?'selected':'']" v-for="(item,index) in hdItems" :key="index">{{item.label}}
      </div>
    </div>
    <div class="orders-bd" v-if="orders1.length">
      <div class="order-card" v-for="(order,index) in orders1" :key="index">
        <div class="order-title">
          <span class="order-code">订单号：{{order.orderCode}}</span>
          <span class="order-status">{{returnOrder(order)}}</span>
        </div>
        <div @click="$router.push('/detailActionComplete?code='+order.orderCode)">
          <card :imgSrc.sync="order.productImageUrl" :name="order.productTitle" :key="i"  >
            <div class="good-desc">
              <!-- <span class="good-desc-info">{{good.modelName}}</span>
              <span class="good-desc-info">{{good.modelSize}}</span> -->
            </div>
            <!-- <div class="good-refund" v-if="auditStatusList.filter(item => {return item.value == good.refundStatus}).length">
              {{auditStatusList.filter(item => {return item.value == good.refundStatus})[0].label}}
            </div> -->
            <div class="good-price">
              <span class="price-icon">￥</span>
              <span class="good-price-num">{{order.price}}</span>
            </div>
            <div class="good-count">
              x{{order.count}}
            </div>
          </card>
        </div>
        
        <div class="order-info">
          <span class="goods-count">共{{order.count}}件商品</span>
          <span class="order-price">实付款：<span class="order-money">￥{{order.price}}</span></span>
        </div>
        <div class="order-options">
          <div class="order-option" v-if="order.status=='已完成'">
            <div class="handle-btn">删除</div>
          </div>
          <div class="order-option" v-else-if="order.actionOrderStatus=='WAIT_GET'">
            <div class="handle-btn" @click="checkLog(order)">查看物流</div>
            <div class="handle-btn" @click="handleConfirmGet(order.orderCode)">确认收货</div>
          </div>
          <div class="order-option" v-else-if="order.actionOrderStatus=='PART_SEND' || order.actionOrderStatus=='WAIT_SEND'">
          </div>
          <div class="order-option" v-else-if="order.actionOrderStatus=='EVALUATION'">
            <div class="handle-btn" @click="checkLog(order)">查看物流</div>
            <div class="handle-btn" @click="$router.push('/giveComment?code='+order.orderCode+'&type=rmb')">评价</div>
          </div>
          <div class="order-option" v-else-if="order.actionOrderStatus=='COMPLETED'&&order.isEvaluation == 'y'">
            <div class="handle-btn" @click="checkLog(order)">查看物流</div>
          </div>
          <div class="order-option" v-else-if="order.actionOrderStatus=='WAIT_PAY'">
            <div class="remind-btn" @click="handleCancel(order.orderCode)">取消订单</div>
            <div class="handle-btn" @click="wxPay(order.orderCode)">支付</div>
          </div>
          <div class="order-option" v-else-if="order.status=='已取消'">
            <div class="handle-btn">删除</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="text-align: center;font-size: .3rem;margin-top: 1rem;">
      暂无订单
    </div>

      <div v-if="totalCount > orders1.length">
          <div class="more" @click="handleMore" v-if="!showMore">查看更多</div>
          <load-more tip="正在加载" v-else></load-more>
      </div>
  </div>
</template>

<script>
	import CONSTANT from "../../../wechat/static/constant/urlconstant";
	import common from "../../../wechat/static/common/common";
	import {LoadMore} from "vux";
import card from '../common/Goods-card.vue'
const testimg1 = require('../../images/test.png');
export default {
  
  data(){
    return{
      orders1: [],
      showMore: false,
      hdItems: [{
        label: "全部",
        value: ""
      },{
	      label: "待支付",
	      value: "WAIT_PAY"
      },{
	      label: "待发货",
	      value: "WAIT_SEND"
      },{
	      label: "已发货",
	      value: "WAIT_GET"
      },{
	      label: "已完成",
	      value: "COMPLETED"
      }],
      hdItems1: [{
          label: "全部",
          value: ""
      },{
          label: "待评价",
          value: "EVALUATION",
        },{
	      label: "待支付",
	      value: "WAIT_PAY"
      },{
          label: "待发货",
          value: "WAIT_SEND-PART_SEND"
      },{
          label: "已发货",
          value: "WAIT_GET"
      },{
	      label: "已完成",
	      value: "COMPLETED"
      },{
	      label: "已取消",
	      value: "CANCEL_USER"
      },{
	      label: "已取消",
	      value: "CANCEL_ADMIN"
      },{
	      label: "已取消",
	      value: "CANCEL_TIMEOUT"
      }],
      auditStatusList: [{
        label: "待审核",
        value: "WAIT_AUDIT"
      },{
        label: "处理中",
        value: "IN_PROCESS"
      },{
        label: "售后成功",
        value: "SUCCESS"
      },{
        label: "售后失败",
        value: "FAILURE"
      }],
      orderStatus:'',
      pageIndex: 1,
      pageSize: 10000,
      totalCount: 0,
        selectArr: []
    }
  },
    mounted() {
      this.getOrderList()
    },
  methods:{
    checkLog(obj){
      if(!obj.logisticsDTOList.length){
        return
      }

        this.$router.push({
            path:'/logisticsDetail',
            query:{
                logisticsCompany:obj.logisticsDTOList[0].logisticsCompany,
                logistics:obj.logisticsDTOList[0].logistics
            }
        })
      },
    leftBtn(){
      this.$router.replace('my')
    },
    payBtn(order) {
        let count = 0
        order.orderItems.map( item => {
            count = count+item.count
        })
        this.$router.push({
            path: "/account",
            query: {
                id: order.id,
                index: 0,
                cartNum: count
            }
        });
    },
    returnOrder(val){
      let str;
      this.hdItems1.map((item)=>{
        if(item.value.indexOf(val.actionOrderStatus) != -1){
          str = item.label
        }
      })
      return str
    },
  	getOrderList(state) {
      this.$vux.loading.show({
        text: "加载中"
      });
	    let url = CONSTANT.ORDER.orderActionPage;
	    let params = {
            pageIndex: 1,
            pageSize: 10000,
            actionOrderStatus:state
        }
	    common.post(url, params, res => {
        this.$vux.loading.hide();
		    if (res.code == 200) {
                this.orders1 = res.data.bussData;
                console.log(this.orders1,'orders1')
			    this.totalCount = res.data.pageCount
		    }
	    });
    },
    handleCancel(code) {
	    let url = CONSTANT.ORDER.actionCancel;
	    common.get(url, code, (res) => {
		    if (res.code == 200) {
			    this.$vux.toast.show({
				    text: "取消成功"
			    })
			    this.getOrderList(this.orderStatus)
		    } else {
			    this.$vux.toast.show({
				    type: "warn",
				    text: res.data.errMsg
			    })
		    }
	    })
    },
    handleConfirmGet(code) {
	    let url = CONSTANT.ORDER.actionConfrim;
	    common.get(url, code, (res) => {
		    if (res.code == 200) {
			    this.$vux.toast.show({
				    text: "确认收货成功"
			    })
			    this.getOrderList(this.orderStatus)
		    } else {
			    this.$vux.toast.show({
				    type: "warn",
				    text: res.data.errMsg
			    })
		    }
	    })
    },
    linkTo(link){
      this.$router.push(link)
    },
    changeOdType(env){
	    this.orderStatus = env
      this.getOrderList(env)
    },
    linkToOrder(link,status){
        this.$router.push({
          path:link+'/'+status,
        })
    },
	  handleMore() {
    	    let status;
    	    if (this.orderStatus) {
    	    	if (this.orderStatus.split("-").length > 1) {
    	    		status = [this.orderStatus.split("-")[0], this.orderStatus.split("-")[1]]
                } else {
    	    		status = [this.orderStatus]
                }
            } else {
		        status = ""
            }
		  this.showMore = true
		  this.getOrderList(status)
    },
    wxPay(order) {
      this.$router.push('/detailActionComplete?code='+order)
      return
      let url = `${CONSTANT.ORDER.orderprepay}${order}?orderCode=${order}`;
        common.get(url, '', res => {
            if (res.code == 200) {
                var bussData = res.data.bussData
                let rejecturl = `${location.origin}/wechat/detailActionComplete?code=${order}`
                let url = `${bussData.mwebUrl}&redirect_url=${encodeURIComponent(rejecturl)}`
                location.replace(url)
            } else {
            
                this.$vux.toast.show({
                    type: "cancel",
                    text: res.data.errMsg
                });
            }
        },(res)=>{
        });
    },
    //调起微信支付
    wechatPay(param,order) {
        let that = this;
        WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
                appId: param.appId, //公众号名称，由商户传入
                timeStamp: param.timeStamp, //时间戳，自1970年以来的秒数
                nonceStr: param.nonceStr, //随机串
                package:param.packageValue,
                signType:param.signType, //微信签名方式：
                paySign: param.paySign //微信签名
            },
            function(res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    that.checkPay(order)
                }
                // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            }
        );
    },
    checkPay(order){
        let url = CONSTANT.LIST.payCheck;
        common.get(url, `/${order}`, res => {
            if (res.code == 200) {
            let data = res.data.bussData.returnCode
            if(data == 'SUCCESS'){
                this.getOrderList()
            }
            }
        });
    },
  },
  components:{
    card, LoadMore
  }
}
</script>

<style lang="less">
  body,html{
    width:100%;
    background: #f7f7f7;
  }
  .wrapper-action{
    margin-bottom:1.23rem;
    .good-price{
        // bottom: .7rem!important;
    }
    .header-top{
      height: .8rem;
      line-height: .8rem;
      background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
      .arrow-left{
        position: absolute;
        left: .1rem;
        top: .1rem;
        height: .9rem;
        width: 1rem;
        z-index: 99;
        img{
          height: .5rem;
          width: .5rem;
        }
      }
    }
      .more {
          padding: .2rem 0;
          text-align: center;
          font-size: 14px;
      }
      .weui-loadmore {
          width: 100%!important;
          margin: .3rem 0!important;
      }
    .orders-hd{
      padding-left :.25rem;
      padding-right:.25rem;
      display: flex;
      flex-direction: row;
      height:.88rem;
      align-items:center;
      justify-content: space-between;
      background: white;
      border-bottom:.01rem solid rgba(238,238,238,.8);
      .hd-item{
        position: relative;
        height:100%;
        line-height:.88rem;
        font-size:.32rem;
        font-family:PingFang-SC-Medium;
        color:rgba(153,153,153,1);
        font-weight: 500;
      }
      .selected{
        color:#FF7268;
      }
      .selected:after{
        content: '';
        width:.6rem;
        background-color:#FF7268;
        height:.03rem;
        position: absolute;
        bottom: 0;
        margin-left:auto;
        margin-right:auto;
        left:0;
        right:0;
        border-radius:.02rem;
      }
    }
    .orders-bd{
      .order-card{
        background: white;
        padding-left:.25rem;
        padding-right:.25rem;
        box-sizing: border-box;
        margin-bottom:.2rem;
      .order-title{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height:.88rem;
        align-items: center;
        font-family:PingFang-SC-Medium;
        font-size: .28rem;
        .order-code{
          color:#333333;
        }
        .order-status{
          color:#FF7268;
        }
      }
      .card{
        box-sizing: border-box;
        border-bottom:.01rem solid rgba(238,238,238,.6);
        border-top:.01rem solid rgba(238,238,238,.6);
        .goods-item-content{
          box-sizing: border-box;
          height:2.3rem;
          padding-top:0rem;
        .good-desc{
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
          max-height: .9rem;
          .good-desc-info{
            font-size:.26rem;
            font-family:PingFang-SC-Light; 
            color:rgba(158,158,158,1);
            line-height:.5rem;
            margin-right:.2rem;
            }
          }
          .good-price{
            position: absolute;
            bottom:0.1rem;
            color:#FF7268;
            .good-price-num{
              font-size:.31rem;
              font-family:PingFang-SC-Light;
              line-height:.52rem;
            }
          }
          .good-count{
            position:absolute;
            bottom:0.1rem;
            right:0;
            color:#666666;
            font-size: .26rem;
            font-family:PingFang-SC-Medium;
          }
        }
        .good-refund {
          text-align: right;
          color: #fd2024;
          font-size: .28rem;
          font-weight: bold;
          margin-right: -0.23rem;
        }
      }
      .order-info{
        height:.9rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom:.01rem solid rgba(238,238,238,.6);
        .goods-count{
          font-size: .3rem;
          color:#333333;
          font-family:PingFang-SC-Medium;
        }
        .order-price{
          font-size: .3rem;
          color:#666666;
          font-family:PingFang-SC-Medium;
          .order-money{
            color:#FF7268;
            font-size: .32rem;
          }
        }
      }
      .order-option{
        width:100%;
        height:.9rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        .remind-btn{
          margin-right:.2rem;
          width:1.56rem;
          height:.5rem;
          color:#999999;
          border-radius: .04rem;
          text-align: center;
          line-height: .5rem;
          border:.02rem solid rgba(153,153,153,1);
          font-size:.26rem;
        }
        .handle-btn{
          margin-left:.2rem;
          font-size:.26rem;
          width:1.56rem;
          height:.5rem;
          color:#FF7268;
          border-radius: .04rem;
          text-align: center;
          line-height: .5rem;
          border:.02rem solid #FF7268;
        }
      }
    }
    }
  }
</style>
